<template>
  <el-card class="charts">
    <el-row slot="header" type="flex" justify="space-between">
      <span>产品销售分部</span>
      <div class="tool-bar">
        <i @click="reloadCategory" class="el-icon-fa-refresh"></i>
      </div>
    </el-row>
    <chart :options="ringOpt" auto-resize/>
  </el-card>
</template>

<script>
  import "echarts/lib/chart/pie";
  import { util } from "@/config";
  import { genLabels } from "../helper";

  export default {
    name: "pie_view",
    data() {
      return {
        category: [], // 分类
        params: {
          category: 0 // 0:本周; 1:本月; 2:本季度
        }
      };
    },
    mounted() {
      this.reloadCategory();
    },
    computed: {
      ringOpt() {
        const me = this;
        return {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          graphic: genLabels(["本周", "本月", "本季度"], (index) => {
            if (index === me.params.category) {
              return;
            }
            me.params.category = index;
            me.reloadCategory();
          }, me.params.category),
          series: [{
            name: "销售分部",
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            data: me.category
          }]
        };
      }
    },
    methods: {
      reloadCategory() {
        this.getCategory().then(category => {
          this.category = category;
        });
      },
      getCategory() {
        return Promise.resolve([
          { name: "PP", value: util.random(200, 100) },
          { name: "PVC", value: util.random(200, 100) },
          { name: "PPR", value: util.random(200, 100) },
          { name: "PE", value: util.random(200, 100) }
        ]);
      }
    }
  };
</script>
